<template>
  <div class="demon" v-if="store.count.length > 0">
    <div>已选条件:</div>
    <div class="demon_two">
      <div
        class="demon_cox"
        v-for="item in store.count"
        :key="item"
        @click="demonClick(item.name)"
      >
        {{ item.name }}
        <span style="margin-right: 5px" v-for="ele in item.value" :key="ele">
          <span
            v-if="item.name == '地区：'"
            v-for="lll in ele.name"
            :key="lll"
            style="margin-right: 3px"
          >
            <span v-for="aa in lll" :key="aa">{{ aa }}</span></span
          >
          <span
            v-else-if="item.name == '公告类型：'"
            v-for="ll in ele.name"
            :key="ll"
            style="margin-right: 3px"
            >{{ ll.name }}</span
          >
          <span v-else>{{ ele.name }}</span>
        </span>
      </div>
    </div>
    <div class="demon_three" @click="removals">
      <span class="demon_three-span">清空</span>
      <el-icon :size="14">
        <Delete />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { Delete } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { useSearchStore } from "@/pain/search/search";
const store = useSearchStore();
const props = defineProps({
  clickSon: Function,
  childeRef: Object,
});
onMounted(() => {
  console.log("113132", store.count);
});
// 清除
const removals = () => {
  store.count = [];
  // props.clickSon()
  props.childeRef.childeRef1();
  console.log("113132", store.count);
};

const demonClick = (name) => {
  console.log(name);
};
</script>

<style lang="scss" scoped>
.demon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px 15px 20px;

  .demon_two {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .demon_cox {
      margin: 3px 0 0 15px;
      padding: 5px 10px;
      background: #fde8bf;
      border-radius: 50px;
      font-size: 14px;
      color: #f78c16;
    }
  }

  .demon_three {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    height: 34px;
    background-color: #ffe2e2;
    color: #ff4848;
    border-radius: 50px;
    cursor: pointer;

    .demon_three-span {
      margin-right: 5px;
    }
  }
}
</style>
